{block name=head}
    <style type="text/css">
        #newsNavTabs {
            background:#0098D8;
            border:1px solid #0098D8;
            border-right:0;
        }
        #newsNavTabs li {
            margin:0;
            border-bottom:1px solid #ddd;
            line-height:2;
        }
        #newsNavTabs li:last-child {
            border-bottom:0;
        }
        #newsNavTabs li>a {
            color:#fff;
            border-radius:0;
        }
        #newsNavTabs li.active>a,#newsNavTabs li:hover a {
            /*background:#A4C1F9;*/
            background:#fff;
            color:#0098D8;
        }
        #tabContent .thumbnail {
            /*overflow:hidden;*/
        }
        #tabContent .thumbnail>img {
            transition: all .5s ease-in-out;
        }
        #tabContent .thumbnail>img:hover {
            transform:scale(1.3);
        }
    </style>
{/block}

{block name=body}
    {* Define the function *}
    {function name=render_product_list level=0 parenturl="" menu=0}
        {foreach $items as $item}
            <div class="citem partner">
                <a href="{$item.partner_website}" target="_blank">
                    <img src="{if $item.partner_logo neq ''}{$item.partner_logo}{else}/images/no-image-available.jpg{/if}"
                         alt="{$item.partner_name}" title="{$item.partner_name}" class="img-responsive">
                    <div class="testinfo">
                        <div class="testquote">{$item.partner_name}</div>
                        <div class="testname">{$item.partner_description}</div>
                    </div>
                </a>
            </div>
        {/foreach}
    {/function}
    <div id="maincont">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">新闻</li>
            </ol>
            <div style="display:flex;">
                <div style="flex:1;z-index:2;">
                    <ul class="nav nav-pills nav-stacked" role="tablist" id="newsNavTabs">
                        {foreach $tabs as $tab}
                            <li role="presentation" data-tabid="{$tab.id}"
                                class="new-nav-item-tab-container {if $tab.id eq $tabId} active {/if} "
                                style="">
                                <a href="#tab{$tab.id}" class="new-nav-item-tab" aria-controls="tab{$tab.id}" role="tab"
                                   data-toggle="tab" style="position:relative;padding:5px 0;text-align:center;">{$tab.title} <span style="position:absolute;top:50%;right:2%;margin-top:-.5em;" class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                            </li>
                        {/foreach}
                    </ul>
                </div>
                <div style="padding:0 2%;flex:3;border:1px solid #0098D8;border-bottom:0;margin-left:-1px;z-index:1;min-height:650px;position: relative;padding-bottom: 70px;">
                    <div class="tab-content" id="tabContent">
                        {foreach $tabs as $tab}
                            <div role="tabpanel" class="news-item tab-pane {if $tab.id eq $tabId} active {/if} " id="tab{$tab.id}" style="padding:2% 0;">

                            </div>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}

{* Place additional javascript here so that it runs after General JS includes *}
{block name=tail}
    <script type="text/javascript">
        //初始化新闻列表缓存
        var newsListCache=[];

        (function(){
            if(window.innerWidth<768){
                $("#newsNavTabs li>a span.glyphicon").hide();
                $("#newsNavTabs li>a").css('font-size','.5em');
            }

            //标签添加鼠标事件
//            $(".new-nav-item-tab-container").on('mouseenter', function (e) {
//                e.preventDefault();
//                $(this).find('a').click();
//            });

            //初始化首次展示的新闻列表
            if($(".news-item.active").length==0){
                $(".news-item:first-child").addClass('active');
            }
            if($(".new-nav-item-tab-container.active").length==0){
                $(".new-nav-item-tab-container:first-child").addClass('active');
            }

            //列表内容分页类
            function GetListData(){
                this.currentPage=1;     //当前页码
                this.pageSize=10;       //每页新闻条数
                this.currentTabId='';   //当前标签id
                this.postUrl=window.location.pathname;  //请求地址
            }
            GetListData.prototype={
                //初始化
                init:function(pageSize){
                    this.pageSize=pageSize;
                    var self=this;
                    //所有标签首页初始化
                    $(".news-item").each(function(){
                        var currentTabId=$(this).attr("id").replace("tab","");
                        self.getData(currentTabId,self.currentPage);
                    });
                    this.currentTabId=$(".news-item.active").attr("id").replace("tab","");
                },
                //获取数据
                getData:function(currentTabId,currentPage){
                    //检查缓存
                    if(newsListCache['tab'+currentTabId]!=undefined && newsListCache['tab'+currentTabId]['page'+currentPage]!=undefined && newsListCache['tab'+currentTabId]['page'+currentPage].length!=0){
                        //页面拼接
                        this.concatHTML(newsListCache['tab'+currentTabId]['page'+currentPage].data,currentTabId,newsListCache['tab'+currentTabId]['page'+currentPage].page);
                    }else{ //请求数据
                        var self=this;
                        var params={};
                        params.ajax=true;
                        params.currentPage=currentPage;
                        params.pageSize=this.pageSize;
                        params.tabId= (currentTabId==''?this.currentTabId:currentTabId);
                        $.post(this.postUrl,params,function(data){
                            console.log(data);
                            //存入缓存
                            if(newsListCache['tab'+currentTabId]==null){
                                newsListCache['tab'+currentTabId]=[];
                            }
                            newsListCache['tab'+currentTabId]['page'+currentPage]=data.data;
                            //页面拼接
                            self.concatHTML(data.data.data,currentTabId,data.data.page);
                        },"json");
                    }
                },
                //拼接html
                concatHTML:function(data,currentTabId,page){
                    var html="";
                    $.each(data,function(key,val){
                        html+='<div class="news-item-container" style="cursor:pointer;border-bottom:1px solid #ddd;" data-newid='+val.id+'>';
                        html+='<a class="" style="position:relative;text-decoration: none;">';
                        html+='<h3 class="news-outside-title" style="margin-top:.5em;margin-bottom:.5em;">'+val.title+'</h3>';
                        html+='<div class="news-inside-container" style="display:none;"><div class="col-sm-2 thumbnail">';
                        html+='<img src='+val.image+' class="news-img" style="width:100%" /></div><div class="col-sm-10 news-img-info">';
                        html+='<h4 class="news-inside-title" style="margin-top:.5em;margin-bottom:.5em;font-size:.8em;color:#aaa;">'+val.start_time+'</h4>';
                        html+='<p class="news-outline" style="margin-bottom:.5em;word-break: break-all;color:#333;">'+val.content+'</p></div></div></a></div>';
                    });
                    //刷新导航
                    var nav=this.updateNav(currentTabId,page);
                    $("#tab"+currentTabId).html(html+nav);
                    //启用动画
                    this.listAnimate();
                    //启用导航
                    this.navAction();
                    //挂载链接
                    this.addLink();
                },
                //更新分页导航
                updateNav:function(currentTabId,page){
                    var html='';
                    html+='<nav aria-label="Page navigation" data-tabid='+currentTabId+' style="position: absolute;bottom: 0;right: 10px;">';
                    html+='<ul class="pagination"><li class="prev ';
                    if(page.currentPage==1){
                        html+='disabled';
                    }
                    html+='"><a aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';
                    var commonLi1='<li class="page-num ',
                            commonLi2='"><a>',
                            commonLi3='</a></li>';
                    if(page.currentPage<=3){
                        for(var i=1;i<=page.totalPage;i++){
                            html+=commonLi1;
                            if(i==page.currentPage){
                                html+='active';
                            }
                            html+=commonLi2+i+commonLi3;
                        }
                    }else if(page.currentPage>page.totalPage-3){
                        for(var i=page.totalPage-4;i<=page.totalPage;i++){
                            if(i<0){
                                i=1;
                            }
                            html+=commonLi1;
                            if(i==page.currentPage){
                                html+='active';
                            }
                            html+=commonLi2+i+commonLi3;
                        }
                    }else{
                        for(var i=page.currentPage-2;i<=page.currentPage+2;i++){
                            html+=commonLi1;
                            if(i==page.currentPage){
                                html+='active';
                            }
                            html+=commonLi2+i+commonLi3;
                        }
                    }
                    html+='<li class="next ';
                    if(page.currentPage==page.totalPage){
                        html+='disabled';
                    }
                    html+='"><a aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
                    html+='</ul></nav>';
                    return html;
                },
                //新闻列表展开/收起
                listAnimate:function(){
                    $(".news-item-container").on("mouseenter",function(){
                        if(!$(this).find('.news-inside-container').hasClass('active')){
                            $(".news-item-container .news-inside-container.active").slideUp().removeClass('active');
                            $(this).find('.news-inside-container').slideDown().addClass('active');
                        }
                    });
                    return this;
                },
                //导航动作
                navAction:function(){
                    var self=this;
                    $("nav[data-tabid] li").on('click',function(e){
                        e.preventDefault();
                        if(!($(this).hasClass('disabled')||$(this).hasClass('active'))){
                            var currentPage=0;
                            var currentTabId=$(this).parents('nav[data-tabid]').attr('data-tabid');
                            if($(this).hasClass('prev')){
                                currentPage=parseInt($(this).siblings('.active').find('a').html())-1;
                            }else if($(this).hasClass('next')){
                                currentPage=parseInt($(this).siblings('.active').find('a').html())+1;
                            }else{
                                currentPage=$(this).find('a').html();
                            }
                            self.getData(currentTabId,currentPage);
                        }
                    });
                },
                //新闻启用链接
                addLink:function(){
                    $(".news-inside-container").on('click',function(e){
                        e.preventDefault();
                        var newid=$(this).parents('.news-item-container').attr('data-newid');
                        window.location.href='/our-program/news-info?articleid='+newid;
                    });
                }
            };

            //获取列表信息实例
            var listDataObj=new GetListData();
            listDataObj.init(10);

            //复写导航单击事件
            $(".new-nav-item-tab-container").on('click',function(e){
                e.preventDefault();
                if(!$(this).hasClass('active')){
                    $('#newsNavTabs li.active').removeClass('active');
                    $(this).addClass('active');
                    $('.news-item.active').removeClass('active');
                    $(".news-item[id='tab"+$(this).attr('data-tabid')+"']").addClass('active');
                    $("nav[data-tabid]").hide();
                    $("nav[data-tabid='"+$(this).attr('data-tabid')+"']").show();
                }
            });

        })();
    </script>
{/block}
